<!DOCTYPE html>
<html>
	<head xmlns:th="http://www.thymeleaf.org" >
		<meta charset="utf-8" />
		<title>小米商城-首页</title>
		<link rel="stylesheet" type="text/css" href="../static/css/site.css"
			th:href="@{/css/site.css}"/>
		<link rel="stylesheet" type="text/css" href="../static/css/index.css"
			th:href="@{/css/index.css}"/>
	</head>
	
	<!-- 
	Thymeleaf是一个模版引擎, 作用相当于原来的JSP
	Thymeleaf对前端人员更加的友好, 方便前后端人员合作开发
	
	Thymeleaf比JSP的语法更好, 嵌入在标签的属性中, 
		在标签上添加 th:XXX="", 动态设置标签的属性,  通常用于设置超连接, 地址类
		在标签上添加 th:text="", 动态设置标签的内容, 
		在标签上添加 th:utext="", 动态设置标签的内容, 可以解析其中的html标签
		
		如果需要在JS中使用Thymeleaf, [ [ ] ]添加动态的数据
	 -->
	<body>
		
		<!-- 引用一个片段 
			insert 插入, 将引用的片段插入到当前标签内部
			replace 替换, 使用引用的片段, 替换当前的标签,
			include 引入, 将引用的片段内容, 放到当前标签内
		-->
		<div th:replace="frag::header" id="header"></div>
		
		<!--  -->
		<div class="swiper">
			<div class="container">
				<div class="swiper-wrapper">
				</div>
				<div class="goods-sorts">
					<ul>
						<li th:each="parent:${allParent}" ><a href="javascript:;"><span th:text="${parent.name}"></span><i class="mi-icon icon-right"></i></a>
							<div class="children">
								<ul>
									<li th:each="child:${parent.children}" class="left">
										<a href="" th:href="@{'/goods/search?categoryId='+${child.id}}" >
										<img th:src="@{'/upload/'+${child.pic}}" >
										<span th:text="${child.name}"></span>
									</a></li>
								</ul>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>

		
		<div class="recommend">
			<div class="container">
				<div class="banner">
					<a href="">
						<img src="../static/img/banner-1.webp" />
					</a>
				</div>
				
				<!-- 手机 -->
				<div class="brick">
					<div class="brick-head clear">
						<h2 class="title left">推荐</h2>
					</div>
					<div class="brick-box clear">
						<div class="left brick-left-single">
							<a href=""><img src="../static/img/brick-box-goods-1.webp" ></a>
						</div>
						<div class="right">
							<ul>
								<li th:each="goods,status:${goodsList.list}" >
									<a href=""  th:href="@{'/goods/'+${goods.id}}">
									<div class="img" >
										<img  th:src="@{'/upload/' + ${goods.picList[0].url} }" >
									</div>
									<h3 class="title" th:text="${goods.name}" >黑鲨4S</h3>
									<p class="desc" th:text="${goods.color+'&nbsp'+goods.version}">磁动力升降肩键</p>
									<p class="price" th:text="${goods.markPrice}">2699元起</p>
								</a></li>
							</ul>
						</div>
					</div>
				</div>

			</div>
		</div>
		
		<!-- 底部 -->
		<div th:replace="frag::footer" id="footer"></div>
		
		<!-- 引入jquery -->
		<script src="../static/js/jquery-2.1.4.js" th:src="@{/js/jquery-2.1.4.js}" type="text/javascript" charset="utf-8"></script>
		<!-- 引入轮播图 -->
		<script src="../static/js/swiper.js" th:src="@{/js/swiper.js}" type="text/javascript" charset="utf-8"></script>
		<!-- 引入index.js -->
		<script src="../static/js/index.js" th:src="@{/js/index.js}" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			// 创建轮播插件
			var swiper = new Swiper({
				elem: '.swiper-wrapper',
				width: 1226,
				height: 460,
				speed: 2000,
				imgs: [
					{img:"../static/img/swiper-1.jpg", link: "/goods/33"},
					{img:"../static/img/swiper-2.webp",  link: "/goods/32"},
					{img:"../static/img/swiper-3.webp",  link: "/goods/20"},
					{img:"../static/img/swiper-4.webp",  link: "/goods/31"},
					{img:"../static/img/swiper-5.webp", link: "/goods/18"} ]
			});
			// 初始化轮播图
			swiper.init();	
		</script>
		<script th:if="false">
			// 动态页面需要去掉
			$("#header").load("header.html");
			$("#footer").load("footer.html");
			
			$(".swiper-wrapper .next").css('background-image', 'url(../static/img/icon-slides.png)')
			$(".swiper-wrapper .pre").css('background-image', 'url(../static/img/icon-slides.png)')
		</script>
	</body>
</html>
